<template>
	<view>
		<view class="title">
			<text>您对本次服务满意吗？</text>
		</view>
		<view class="service-content">
			<image src="../../../static/img/doctor.png" mode=""></image>
			<view class="service-text">
				<text class="text-1">助医服务</text>
				<text class="text-2">￥38</text>
			</view>
		</view>
		<view class="score">
			<text>{{valueText}}</text>
			<view>
				<uni-rate allow-half v-model="value" @change="onChange" />
			</view>
		</view>
		<view class="swiper-box">
			<swiper :indicator-dots="true" :autoplay="false">
				<swiper-item>
					<view class="swiper-item">
						<view class="swiper-text">
							<text>请问本次服务时长是多少?</text>
						</view>
						<view class="select-box">
							<uni-data-checkbox mode="tag" :localdata="range" @change="change">
							</uni-data-checkbox>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="swiper-text">
							<text>请问对陪护员是否满意?</text>
						</view>
						<view class="select-box">
							<uni-data-checkbox mode="tag" :localdata="range2" @change="change">
							</uni-data-checkbox>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="swiper-text">
							<text>请问对助医是否满意?</text>
						</view>
						<view class="select-box">
							<uni-data-checkbox mode="tag" :localdata="range2" @change="change">
							</uni-data-checkbox>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"></view>
					<view class="swiper-text">
						<text>请问对平台使用是否满意?</text>
					</view>
					<view class="select-box">
						<uni-data-checkbox mode="tag" :localdata="range2" @change="change">
						</uni-data-checkbox>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="input-box">
			<textarea type="text" v-model="textContent" placeholder="请输入评价的内容..." />
		</view>
		<view class="uplod-box">
			<easy-upload  uploadUrl="http://121.5.35.178:8081/admin/upload/image"
				:types="types" @successImage="successImage" :autoUpload="true"
				/>
		</view>
		<view class="button-box">
			<button type="default" @click="submitInfo">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 4,
				valueText: '"好"',
				range: [{
					"value": 0,
					"text": "大于一小时"
				}, {
					"value": 1,
					"text": "小于一小时"
				}],
				range2: [{
					"value": 0,
					"text": "满意"
				}, {
					"value": 1,
					"text": "不满意"
				}],
				textContent: "",
				types:"image"

			}
		},
		methods: {
			onChange(v) {
				
				if (v.value > 0 && v.value < 2) {
					this.valueText = '"差"'
				} else if (v.value >= 2 && v.value < 3.5) {
					this.valueText = '"一般"'
				} else {
					this.valueText = '"好"'
				}
			},
			change(v) {
				//console.log(v)
			},

			submitInfo() {
				uni.navigateTo({
					url:"../../luo/serviceList/serviceList"
				})
			},
			successImage(i){
				console.log(i)
			}
		}
	}
</script>

<style scoped>
	.title {
		height: 70px;
		line-height: 70px;
		text-align: center;
		font-weight: bolder;
	}

	.service-content {
		width: 95%;
		background-color: #FAFAFA;
		margin: 0 auto;
		height: 90px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.service-content image {
		width: 70px;
		height: 70px;
		background-color: #3774EC;
		margin-left: 10px;
	}

	.service-text {
		display: flex;
		flex-direction: column;
		margin-left: 15px;
	}

	.text-2 {
		color: #FF6600;
		font-size: 20px;
	}

	.score {
		height: 130px;
		width: 100%;
		line-height: 80px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.score text {
		font-weight: 800;
		text-align: center;
	}

	.score view {
		display: flex;
		justify-content: center;
	}

	.swiper-box {
		border-radius: 5px;
		width: 90%;
		box-shadow: 0px 0px 9px #f4e7e0;
		margin: 0 auto;
	}

	.swiper-item {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.swiper-text {
		width: 100%;
		font-weight: 800;
		text-align: center;
		margin-top: 20px;
	}

	.select-box {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 30px;
	}

	.input-box {
		width: 100%;
		height: 150px;
		margin-top: 15px;
	}

	.input-box textarea {
		background-color: #FAFAFA;
		width: 90%;
		height: 100%;
		margin: 0 auto;
		border-radius: 5px;
	}

	.uplod-box {
		margin: 0 auto;
		width: 90%;
	}

	.button-box {
		margin-top: 15px;
		text-align: center;
		padding-bottom: 50px;
	}

	.button-box>button {
		border-radius: 6px;
		background-color: #2168DB;
		width: 95%;
		color: #fff;
	}
</style>
